<template>
  <el-dialog v-el-drag-dialog :visible.sync="dVisible" :close-on-click-modal="false" width="840px" title="添加签名" :before-close="canAddFun">
    <div class="content">
      <div class="left-cont">
        <p>移动端扫描二维码添加签名</p>
        <img :src="codeimg" alt="">
      </div>
      <div class="right-cont">
        <div class="list-title"><h4>选择已填加签名</h4></div>
        <div v-if="signList.length>0">
          <el-select v-model="selIndex" placeholder="请选择">
            <el-option
              v-for="(item,index) in signList"
              :key="index"
              :label="item.imgFileName"
              :value="index"
            />
          </el-select>
          <div class="sign-img"><img :src="'data:image/png;base64,'+signList[selIndex].imgFileData"></div>
          <el-button class="confirm" type="success" icon="el-icon-check" circle @click="selSign" />
        </div>
        <p v-if="signList.length<1">暂无可用签名</p>

      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
    components: {

    },
    props: {
        dVisible: { type: Boolean, default: false }
    },
    data() {
        return {
            codeimg: '',
            tSessionId: '',
            signList: [],
            selIndex: 0,
            timer: null
        }
    },
    computed: {
        curUser() {
            return this.$store.getters.loginUser
        }
    },
    watch: {
    },
    created() {
        this.qrCode()
        this.searchOldSign()
    },
    beforeDestroy() {

    },
    mounted() {

    },
    methods: {
        // 生成手机扫描二维码
        qrCode() {
            const goUrl = window.location.protocol + '//' + window.location.host + '/mindex.html#/mPdfSign'
            this.$http({
                method: 'GET',
                url: 'usersetting/signature/getSignatureQrCode',
                params: { signatureH5Url: goUrl }
            }).then(response => {
                if (response.code === 'success') {
                    this.codeimg = 'data:image/jpg;base64,' + response.body.image
                    this.tSessionId = response.body.tSessionId
                    this.timer = setInterval(() => { this.searchNewSign() }, 2000)
                } else {
                    this.$message.error(response.message)
                }
            })
        },

        // 查询我的已添加签名
        searchOldSign() {
            this.$http({
                method: 'POST',
                url: 'usersetting/signature/querydata',
                params: { 'orderBy': 'signTime desc' },
                data: [
                    { 'compare': '=', 'field': 'ownerAccount', 'merge': true, 'value': this.curUser.personAccount }
                ]
            }).then(response => {
                if (response.code === 'success') {
                    this.signList = response.body.listdata
                } else {
                    this.$message.error(response.message)
                }
            })
        },

        // 选择图片并确定
        selSign() {
            this.$emit('addSucc', this.signList[this.selIndex])
            window.clearInterval(this.timer)
        },

        // 未选择图片并关闭
        canAddFun() {
            this.$emit('canAddFun')
            window.clearInterval(this.timer)
        },

        // 查询新增签名
        searchNewSign() {
            this.$http({
                method: 'GET',
                url: 'usersetting/signature/getById',
                params: { id: this.tSessionId }
            }).then(response => {
                if (response.code === 'success') {
                    this.signList.splice(0, 1, response.body.vo)
                    this.selIndex = 0

                    this.$nextTick(() => {
                        this.selSign()
                    })
                } else {
                    // console.log(response.message)
                }
            })
        }

    }
}
</script>

<style scoped lang="scss">
h4{margin:0; padding:0;}
.content {width: 95%;height: 400px;border: 1px solid #ccc;overflow: hidden;margin: 50px auto;padding: 20px;}
.left-cont {float: left;width: 40%;}
.left-cont p {color: #7F8D9B;font-size: 16px;font-weight: 700;}
.left-cont img {width: 90%;height: 90%;}
.right-cont {float: right;position: relative;width: 60%;height: 100%;border: 2px solid #D4DAE1;box-sizing: border-box;padding: 30px 20px;}
.list-title {position: absolute;top: -8px;left: 20px;font-size: 16px;color: #7F8D9B;padding: 0 10px;background: #fff;z-index: 99;}
.el-select{width:95%;}
.sign-img {width:95%;margin-top:20px;}
.sign-img img {width: 100%;}
.confirm {width: 40px;height: 40px;position: absolute;right: 15px;bottom: 20px;}
</style>
